import { DateCell, DateToMoment, TableOperationCard, EditcellTable } from 'dw-mx-table';
import React, { useEffect, useState } from 'react';
import { MinusOutlined } from 'dw-mx-icons';
import { Button, Table } from 'dw-mx';
import { request } from 'dw-mx-request';
import useModal from '@/pages/table/DownLoadModal';


export default function TableOperationCardDemo() {

    const [data, setData] = useState([]);

    const getData = async () => {
        const ret = await request('/mock/test/downloaddemo')
        console.log(ret)
        setData(ret.data)
    }

    useEffect(() => {
        getData();
    },[])

    const columns = [
        {
            title: 'name',
            dataIndex: 'name',
            width: 100,
            editable: true,
            componentType: {
                type: 'Input',
                props: { placeholder: '请输入' },
            },
        },
        {
            title: 'age',
            dataIndex: 'age',
            width: 100,
            editable: true,
            componentType: {
                type: 'InputNumber',
                props: {
                    min: 1,
                    max: 100,
                },
            },
        },
        {
            title: 'date',
            dataIndex: 'date',
            width: 150,
            editable: true,
            componentType: {
                type: 'DatePicker',
                props: {
                    format: 'YYYY/MM/DD',
                },
            },
            render: (value, record, index) => {
                return <DateCell value={value} mask={'YYYY/MM/DD'} />;
            },
        },
    ];

    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    const [allColumnsData, updateAllColumnsData] = useState(columns);

    useEffect(() => {
        setData(DateToMoment(data, ['date'], 'YYYY/MM/DD'));
        setSelectedRowKeys([]);
        updateAllColumnsData(columns.slice(0));
    }, [data]);

    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            setSelectedRowKeys(selectedRowKeys);
        },
    };

    const getTabledata = (tabledata) => {
        setData(tabledata);
    };

    const getColumnsData = (columnsData) => {
        updateAllColumnsData((allColumnsData) => {
            return columnsData;
        });
    };

    const newData = {
        key: new Date().getTime().toString(),
        name: '张三',
        age: 32,
        date: '2020/08/09',
    };

    const {open,close,DownloadModal} = useModal(data,columns,selectedRowKeys);

    const columnsData = columns;

    return (
        <div>
            <TableOperationCard
                title={'Table操作'}
                bordered={true}
                extra={{
                    deleteButton: {
                        isShow: true,
                        selectedRowKeys: selectedRowKeys,
                    },
                    addButton: {
                        isShow: true,
                        newData: newData,
                    },
                    downloadButton: {
                        isShow: true,
                        mask: 'YYYY-MM-DD',
                        requestProps: {
                            url: '/sef1/mx/test/tabledownload',
                            filename: '表格',
                        },
                    },
                    setButton: {
                        isShow: true,
                        columnsData: columns,
                    },
                    customExtra: [
                        <Button key={'download'} style={{ fontSize: '13px', lineHeight: '13px' }} onClick={() => open()} >download</Button>
                        ],
                }}
                getChildValues={getTabledata}
                getColumnsValues={getColumnsData}
            >
                <EditcellTable rowSelection={{ ...rowSelection }} dataSource={data} columns={allColumnsData} getChildValues={getTabledata}/>
            </TableOperationCard>
            <DownloadModal onCancel={() => close()} url={'http://10.1.92.156:18081/excel/exportToExcel'}/>
        </div>
    );
}
